<script setup lang="ts">
import { ref } from "vue";
import { message } from "@/utils/message";
import { deviceDetection } from "@pureadmin/utils";
import { getUserInfo, resetUserPassword } from "@/api/auth"; // Import necessary functions

defineOptions({
  name: "AccountManagement"
});

const userId = ref(null); // To store the user ID
const oldPassword = ref("");
const newPassword = ref("");
const isPasswordDialogVisible = ref(false);

async function onClick(item) {
  if (item.title === "账户密码") {
    try {
      const userInfo = await getUserInfo(); // Fetch user info to get ID
      if (userInfo && userInfo.data) {
        userId.value = userInfo.data.id;
        isPasswordDialogVisible.value = true; // Show the dialog
      } else {
        message("无法获取用户信息", { type: "error" });
      }
    } catch (error) {
      message(`获取用户信息失败: ${error}`, { type: "error" });
    }
  } else {
    message("请根据具体业务自行实现", { type: "success" });
  }
}

// Function to handle password reset submission
const handlePasswordReset = async () => {
  if (!userId.value) {
    message("用户ID无效", { type: "error" });
    return;
  }
  if (!oldPassword.value || !newPassword.value) {
    message("请输入旧密码和新密码", { type: "warning" });
    return;
  }

  try {
    const response = await resetUserPassword(userId.value, {
      oldPassword: oldPassword.value,
      newPassword: newPassword.value
    });
    if (response.code === 200) {
      message("密码重置成功", { type: "success" });
      isPasswordDialogVisible.value = false; // Close dialog on success
      oldPassword.value = ""; // Clear fields
      newPassword.value = "";
    } else {
      message(response.message || "密码重置失败", { type: "error" });
    }
  } catch (error) {
    message(`密码重置异常: ${error?.message}`, { type: "error" });
  }
};

const list = ref([
  {
    title: "账户密码",
    illustrate: "当前密码强度：强",
    button: "修改"
  },
  {
    title: "密保手机",
    illustrate: "已经绑定手机：158****6789",
    button: "修改"
  },
  {
    title: "密保问题",
    illustrate: "未设置密保问题，密保问题可有效保护账户安全",
    button: "修改"
  },
  {
    title: "备用邮箱",
    illustrate: "已绑定邮箱：pure***@163.com",
    button: "修改"
  }
]);
</script>

<template>
  <div :class="['min-w-[180px]', deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]']">
    <h3 class="my-8!">账户管理</h3>
    <div v-for="(item, index) in list" :key="index">
      <div class="flex items-center">
        <div class="flex-1">
          <p>{{ item.title }}</p>
          <el-text class="mx-1" type="info">{{ item.illustrate }}</el-text>
        </div>
        <el-button type="primary" text @click="onClick(item)">
          {{ item.button }}
        </el-button>
      </div>
      <el-divider />
    </div>

    <!-- Password Reset Dialog -->
    <el-dialog v-model="isPasswordDialogVisible" title="修改密码" width="40%" :close-on-click-modal="false">
      <el-form :model="{ oldPassword, newPassword }" label-position="top">
        <el-form-item label="旧密码">
          <el-input v-model="oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="newPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isPasswordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handlePasswordReset"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.el-divider--horizontal {
  border-top: 0.1px var(--el-border-color) var(--el-border-style);
}
</style>
